// 1. 使用commonjs的模块化规范
const {add, mul} = require('./js/mathUtils')

// 2. 使用ES6的模块化规范
import {name, age, height} from "./js/info"

// 3. 依赖css文件
require('./css/normal.css')

// 4. 依赖less文件
require('./css/special.less')

// 操作Dom对象添加数据
// writeln：添加完后自动换行
document.writeln('<h2>hello chen</h2>')

console.log(add(10, 20))
console.log(mul(10, 20))

console.log("我的信息为： ", name, age, height);


// 5. 使用Vue进行开发
import Vue from 'vue'
// 外部js导入
import cpn from './vue/app'
// 外部vue文件导入
import App from './vue/App.vue'

// 组件抽离
// const cpn = {
//   template: `
//     <div>
//       <h2>我是标题</h2>
//       <p>{{message}}</p>
//       <button @click="btnClick">按钮</button>
//     </div>
//   `,
//   data() {
//     return {
//       message: "I don't wanna see you anymo"
//     }
//   },
//   methods: {
//     btnClick() {
//       console.log("按钮事件触发")
//     }
//   }
// }

new Vue({
  el: '#app',
  // template: `
  //   <div>
  //     <h2>我是标题</h2>
  //     <p>{{message}}</p>
  //     <button @click="btnClick">按钮</button>
  //   </div>
  // `,
  data : {
    buf : "我是内容"
  },
  template: '<App></App>',
  components: {
    App
  },
  created() {
    console.log("hello my name is xiao")
  }
})


